<!--*************************************
* @update:  修改时间   LIlinbin  [创建文件]
*
* @description: 右侧样式  图层基本配置
****************************************-->

<template>
	<div class="el-box">
		<div class="icon-box"
		    :style="{'left': `${boxLeft-dragW}px`, 'top': boxTop + 'px'}">
			<!-- <column-height-outlined v-show="isFix" /> -->
			<column-width-outlined />
		</div>

		<VueDragResize ref="dragEl"
		    title="拖动"
		    class="drag-box"
		    :w="dragW"
		    :h="dragH"
		    :minw="dragW"
		    :minh="dragH"
		    :x="dragLeft"
		    :y="dragTop"
		    :issues="true"
		    axis="x"
		    :isResizable="false"
		    @dragging="draggingEv">
		</VueDragResize>

		<div class="wrap"
		    :style="{'left': `${boxLeft}px`, 'top': '0px'}">
			<a-tabs v-model:activeKey="activeKey"
			    type="card"
			    @tabClick="dataClick">
				<a-tab-pane key="1"
				    tab="样式">
					<a-collapse activeKey="1"
					    :accordion="false">
						<a-collapse-panel key="1"
						    collapsible="disabled"
						    :show-arrow="false"
						    header="组件开发记录信息">
							<a-form>
								<a-form-item label="作者"
								    class="layer-id">
									<a-input readonly
									    :value="devInfo['作者']" />
								</a-form-item>
								<a-form-item label="时间"
								    class="layer-name">
									<a-input readonly
									    :value="devInfo['时间']" />
								</a-form-item>
							</a-form>
						</a-collapse-panel>
					</a-collapse>

					<component class="config-box"
					    :is="configTag"
					    ref="attrComp"
					    :attrConfig="attrConfig"></component>
				</a-tab-pane>
				<a-tab-pane key="2"
				    tab="数据">
					<dataConfig ref="dataComp"
					    class="data-box"
					    :dataConfig="dataConfig"></dataConfig>
				</a-tab-pane>
				<a-tab-pane key="3"
				    tab="交互">
					<eventConfig ref="eventComp"
					    class="event-box"
					    :eventConfig="eventConfig"></eventConfig>
				</a-tab-pane>
			</a-tabs>
		</div>
	</div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
import dataConfig from 'tools/components/1_dataConfig'
import eventConfig from 'tools/components/2_eventConfig'

export default {
	name: 'compLayerInfo',
	mixins: [],
	components: {
		VueDragResize,
		dataConfig,
		eventConfig
	},
	emits: ['tabClick'],
	props: {
		layerData: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			dragW: 30,
			dragH: 40,
			dragLeft: 270,
			dragTop: 0,

			boxLeft: 300,
			boxTop: 0,

			activeKey: '1',

			configTag: undefined,
			attrConfig: undefined, //[]
			dataConfig: undefined, //{}
			eventConfig: undefined, //{}

			devInfo: {} //组件开发记录信息
		}
	},
	computed: {},
	watch: {
		/* layerData: {
			handler() {
				this.initData()
			},
			deep: true
		} */
		'layerData.componentName'() {
			this.initData()
		}
	},
	created() {},
	mounted() {
		this.init()
	},
	activated() {},
	methods: {
		init() {
			this.initData()
		},

		initData(info) {
			const { clientHeight } = document.body
			this.dragTop = clientHeight / 2 - this.dragH / 2

			const {
				componentName = '',
				attrConfig,
				dataConfig,
				eventConfig,
				devInfo
			} =
				info || this.layerData || {}

			if (componentName.slice(-4) === 'Attr') return

			this.attrConfig = attrConfig || undefined //[]
			this.dataConfig = dataConfig || undefined //{}
			this.eventConfig = eventConfig || undefined //{}

			this.devInfo = devInfo || {}

			this.configTag = componentName ? componentName + 'Attr' : undefined
		},

		dataClick(key) {
			const typeObj = {
				'1': 'style',
				'2': 'data',
				'3': 'event'
			}
			this.$nextTick(() => {
				this.$emit('tabClick', typeObj[key])
			})
		},

		//在拖拽元素里面添加input等类似的表单性元素，无法正常点击操作，特别是focus无法做到，click也是经常失效
		draggingEv(e) {
			const { left, top, width, height } = e

			const { clientWidth, clientHeight } = document.body

			const minT = 0
			const maxT = clientHeight

			if (top < minT) {
				this.dragTop = minT
				this.$refs.dragEl.top = minT
			} else if (top > maxT) {
				this.dragTop = maxT
				this.$refs.dragEl.top = maxT
			} else {
				this.dragTop = top
			}

			const minL = -clientWidth + 300 + 10
			const maxL = 270

			if (left < minL) {
				this.dragLeft = minL
				this.$refs.dragEl.left = minL
			} else if (left > maxL) {
				this.dragLeft = maxL
				this.$refs.dragEl.left = maxL
				this.$refs.dragEl.width = this.dragW
			} else {
				this.dragLeft = left
			}

			this.boxLeft = this.dragLeft + this.dragW
			this.boxTop = this.dragTop
		}
	},
	beforeUnmount() {}
}
</script>

<style scoped lang="less">
.el-box {
	position: fixed;
	right: 300px;
	top: 0;
}

.icon-box {
	position: absolute;
	width: 30px;
	line-height: 140%;
	font-size: 1.6em;
	color: #fff;
}

.drag-box {
	// clip-path: polygon(8% 0, 8% 20%, 92% 20%, 92% 0, 100% 50%, 92% 100%,92% 80%, 8% 80%, 8% 100%, 0 50%);
	cursor: move;
	&:before {
		outline: unset;
	}
}

.wrap {
	position: absolute;
	// transform: translateX(100%);
	width: 300px;
	height: 100vh;
	transition: transform 0.6s 0.1s;
	text-align: center;
	overflow-y: auto;
	color: @text_color_primary;
	background-color: @panel_color_primary;
	// cursor: pointer;
	&:before {
		content: '';
		position: absolute;
		left: -8px;
		top: 0;
		width: 8px;
		height: 100%;
		background-color: transparent;
		z-index: -1;
	}
	/* &:hover {
			transform: translateX(0);
		} */
}
.wrap {
	:deep(.ant-input.layer-name) {
		width: 13em;
		color: @input_color;
		background-color: @input_bg_color;
		border: @input_border;
	}
	:deep(.ant-input.layer-id) {
		width: 12em;
		color: @input_color;
		// background-color:@input_bg_color;
		border: @input_border;
	}
	:deep(.ant-input-affix-wrapper) {
		width: 6em;
		color: @input_color;
		background-color: @input_bg_color;
		border: @input_border;
		margin: 0.25em;
		input {
			background-color: transparent;
			color: @input_color;
			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
			}
		}
		:deep(.ant-input-suffix) {
			color: @text_color_remark;
		}
	}
	& > .ant-tabs {
		color: @text_color_primary;
	}
	&:deep(.ant-tabs-bar) {
		border-color: #fff;
		margin: 0;
		border: none;
		.ant-tabs-nav-container {
			height: 32px;
			border-bottom: 1px solid @panel_color_auxiliary;
			.ant-tabs-nav {
				width: 100%;
			}
		}
		.ant-tabs-tab {
			border-color: transparent;
			background: transparent;
			width: 33%;
			color: initial;
			height: 32px;
			line-height: 32px;
			border-radius: 0;
			padding: 0;
			margin: 0;
			&.ant-tabs-tab-active {
				color: @second_select_color;
				background-color: @second_select_bg_color;
			}
			&.ant-tabs-tab-disabled {
				color: @text_color_remark;
			}
		}
	}
	.ant-tabs-tabpane,
	.ant-tabs-tabpane div.config-box {
		width: 100%;
		text-align: left;
		:deep(.ant-collapse) {
			color: @text_color_primary;
			background-color: transparent;
			border: none;
			.ant-collapse-item {
				border: none;
				.ant-collapse-header {
					color: @text_color_primary;
					background-color: @panel_color_secondary;
					border-radius: 0;
					border-top: 1px solid @panel_color_primary;
					border-bottom: 1px solid @panel_color_auxiliary;
				}
				&.ant-collapse-item-disabled .ant-collapse-header {
					cursor: default;
				}
				.ant-collapse-content {
					color: @text_color_primary;
					background-color: transparent;
					border: none;

					.ant-form-item,
					.ant-form-item .ant-col label {
						color: @text_color_primary;
					}
					.ant-form-item {
						&.layer-id {
							margin-bottom: 0;
							.ant-input {
								// width:11.5em;
								// cursor: initial;
								background-color: @panel_color_primary;
								outline: none;
							}
						}
						&.layer-name {
							margin-bottom: 0;
							.ant-input {
								// cursor: initial;
								background-color: @panel_color_primary;
								outline: none;
							}
						}
					}
					.ant-select-single:not(.ant-select-customize-input)
						.ant-select-selector {
						border: none;
						// color:@text_color_primary;
						// background-color: @input_bg_color;
					}
					.ant-input {
						// color:@text_color_primary;
						// background-color: @input_bg_color;
						border: none;
					}
					.ant-form .ant-form-item .ant-col .ant-switch {
						// background-color: @input_bg_color;
						// &:after{
						// 	background-color: @text_color_remark;
						// }
					}
					.ant-form .ant-form-item .ant-col .ant-switch.ant-switch-checked {
						// background-color: @primary_color;
						// &:after{
						// 	background-color: @input_bg_color;
						// }
					}
				}
			}
		}
	}
	.ant-tabs-tabpane div.data-box {
		width: 100%;
	}
}
</style>